<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">
</div>
<!--在这里写你的内容-->

<body id="test" th:fragment="content">
<div class="panel" style="padding: 10px">
    <div class="panel-heading">
        <h3 class="panel-title">查看药品列表</h3>
    </div>
    <div class="panel-body">
        <div style="text-align: right">
            编号：<input id="searchId" type="text" class="form-control" style="width: 100px;display: inline">
            <button id="search" class="btn btn-default">搜索</button>
        </div>
        <table id="table" class="table table-striped table-hover">
            <thead>
            <tr>
                <th>药品ID</th>
                <th>药名</th>
                <th>国家准字</th>
                <th>药品类型</th>
                <th>医保类型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr th:each="medicine:${medicines}">
                <td style="width: 10%" th:text="${medicine.id}"></td>
                <td style="width: 25%" th:text="${medicine.name}"></td>
                <td style="width: 20%" th:text="${medicine.permitId}"></td>
                <td style="width: 10%" th:text="${medicine.medicineType}"></td>
                <td style="width: 10%" th:text="${medicine.insuranceType}"></td>
                <td style="width: 10%">
                    <nobr>
                        <button th:id="'del'+${medicine.id}" class="btn btn-success btn-sm" style="padding: 6px"
                                th:data-id="${medicine.id}" data-target="#detailModal" data-toggle="modal">详情
                        </button>
                        <button th:id="'edit'+${medicine.id}" class="btn btn-primary btn-sm" style="padding: 6px"
                                th:data-id="${medicine.id}" data-target="#editModal" data-toggle="modal">编辑
                        </button>
                        <button th:id="'del'+${medicine.id}" class="btn btn-danger btn-sm" style="padding: 6px"
                                th:data-id="${medicine.id}" data-target="#delModal" data-toggle="modal">删除
                        </button>
                    </nobr>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="paginationBar" style="text-align: center; bottom: 0%; position: center">
            <ul id="pageLimit"></ul>
        </div>
    </div>
</div>
<!-- END FILTER COLUMN -->
<!-- 删除-模态框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="delModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idDel" type="text" class="hidden">
                <p>确定删除？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToDel" type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 编辑-模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                <input id="idValue" type="text" class="hidden">
                <form name="add_news">
                    <div>
                        <div class="box-body col-md-6">
                            <label for="id">药品编号</label>
                            <input id="id" type="text" class="form-control" placeholder="输入药品编号" readonly="readonly">
                            <br>
                            <label for="name">药品名称</label>
                            <input id="name" type="text" class="form-control" placeholder="输入药品名称">
                            <br>
                            <label for="permitId">国字标准</label>
                            <input id="permitId" type="text" class="form-control" placeholder="输入国字标准名">
                            <br>
                            <label for="composition">药品成分</label>
                            <input id="composition" type="text" class="form-control" placeholder="输入药品成分">
                            <br>
                            <label for="efficacy">药品作用</label>
                            <input id="efficacy" type="text" class="form-control" placeholder="输入药品作用">
                            <br>
                            <label for="medicineUsage">用法用量</label>
                            <input id="medicineUsage" type="text" class="form-control" placeholder="输入用法用量">
                            <br>
                            <label for="contraindication">禁忌</label>
                            <input id="contraindication" type="text" class="form-control" placeholder="输入禁忌">
                            <br>
                            <label for="price">价格</label>
                            <input id="price" type="text" class="form-control" placeholder="输入药品价格">
                            <br>
                        </div>

                        <div class=" box-body col-md-6">
                            <label for="insuranceType">医保类型</label>
                            <input id="insuranceType" type="text" class="form-control" placeholder="输入医保类型">
                            <br>
                            <label for="medicineType">药品类型</label>
                            <input id="medicineType" type="text" class="form-control" placeholder="输入药品类型">
                            <br>
                            <label for="attention">注意事项</label>
                            <input id="attention" type="text" class="form-control" placeholder="输入注意事项">
                            <br>
                            <label for="producer">生产产商</label>
                            <input id="producer" type="text" class="form-control" placeholder="输入生产产商">
                            <br>
                            <label for="size">规格</label>
                            <input id="size" type="text" class="form-control" placeholder="输入规格">
                            <br>
                            <label for="store">保存方式</label>
                            <input id="store" type="text" class="form-control" placeholder="输入保存方式">
                            <br>
                            <label for="validityTime">有效期</label>
                            <input id="validityTime" type="text" class="form-control" placeholder="输入有效期">
                            <br>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sureToUpdate" type="button" class="btn btn-danger">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--详情-模态框（Modal）-->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="detailModalLabel">
                    详细信息
                </h4>
            </div>

            <table>
                <td style="width: 500px; text-indent: 4em">
                    <p id="d_id"></p>
                    <p id="d_permitId"></p>
                    <p id="d_name"></p>
                    <p id="d_composition"></p>
                    <p id="d_efficacy"></p>
                    <p id="d_medicineUsage"></p>
                    <p id="d_contraindication"></p>
                    <p id="d_price"></p>
                </td>
                <td>
                    <p id="d_insuranceType"></p>
                    <p id="d_medicineType"></p>
                    <p id="d_attention"></p>
                    <p id="d_producer"></p>
                    <p id="d_size"></p>
                    <p id="d_store"></p>
                    <p id="d_validityTime"></p>
                </td>
                <p id="d_introduce"></p>
            </table>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->

</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">

    <script>
        //删除
        $("#delModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            // alert(JSON.stringify(button))
            var id = button.data('id') //取得data-id 的值
            var modal = $(this)
            modal.find('.modal-body p').text('确定要删除编号为 ' + id + "的药品信息吗")
            modal.find('.modal-body input').val(id)
        })
        $("#sureToDel").click(function () {
            var idDel = $("#idDel").val()
            $.post(
                "/contents/medicine/delete",
                {id: idDel},
                function () {
                    alert("删除成功")
                    $("#test").load(location.href + "#test");
                }
            )
        })

        //编辑
        $("#editModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/contents/medicine/selectById",
                {id: id},
                function (data) {
                    var medicine = data.value;
                    // alert(JSON.stringify(medicine))
                    modal.find('#id').val(medicine.id)
                    modal.find('#permitId').val(medicine.permitId)
                    modal.find('#name').val(medicine.name)
                    modal.find('#composition').val(medicine.composition)
                    modal.find('#efficacy').val(medicine.efficacy)
                    modal.find('#medicineUsage').val(medicine.medicineUsage)
                    modal.find('#contraindication').val(medicine.contraindication)
                    modal.find('#price').val(medicine.price)
                    modal.find('#insuranceType').val(medicine.insuranceType)
                    modal.find('#medicineType').val(medicine.medicineType)
                    modal.find('#attention').val(medicine.attention)
                    modal.find('#producer').val(medicine.producer)
                    modal.find('#size').val(medicine.size)
                    modal.find('#store').val(medicine.store)
                    modal.find('#validityTime').val(medicine.validityTime)
                }
            )
        })
        $("#sureToUpdate").click(function () {
            // alert($("#permitId"))
            $.post(
                "/contents/medicine/update",
                {
                    id: $("#id").val(),
                    name: $("#name").val(),
                    composition: $("#composition").val(),
                    efficacy: $("#efficacy").val(),
                    permitId: $("#permitId").val().replace(/\s+/g,""),
                    contraindication: $("#contraindication").val(),
                    price: $("#price").val(),
                    insuranceType: $("#insuranceType").val(),
                    medicineType: $("#medicineType").val(),
                    attention: $("#attention").val(),
                    producer: $("#producer").val(),
                    size: $("#size").val(),
                    store: $("#store").val(),
                    validityTime: $("#validityTime").val()
                },
                function (data) {
                    // alert(JSON.stringify(data))
                    if (data.code==200 && data.value==true) {
                        alert("修改成功")
                        $("#test").load(location.href + "#test");
                    }
                    else if(data.code==200 && data.value==false)
                        alert("修改失败,国字标准已存在")
                }
            )
        })

        //详细信息
        $("#detailModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id');//取得data-id 的值
            var modal = $(this);
            $.get(
                "/contents/medicine/selectById",
                {id: id},
                function (data) {
                    var medicine = data.value;
                    modal.find('#d_id').text("药品编号：" + medicine.id)
                    modal.find('#d_name').text("药品名称：" + medicine.name)
                    modal.find('#d_permitId').text("国字标准：" + medicine.permitId)
                    modal.find('#d_composition').text("药品成分：" + medicine.composition)
                    modal.find('#d_efficacy').text("药品作用：" + medicine.efficacy)
                    modal.find('#d_medicineUsage').text("用法用量：" + medicine.medicineUsage)
                    modal.find('#d_contraindication').text("禁忌：" + medicine.contraindication)
                    modal.find('#d_price').text("价格：" + medicine.price)
                    modal.find('#d_insuranceType').text("医保类型：" + medicine.insuranceType)
                    modal.find('#d_medicineType').text("药品类型：" + medicine.medicineType)
                    modal.find('#d_attention').text("注意事项：" + medicine.attention)
                    modal.find('#d_producer').text("生产产商：" + medicine.producer)
                    modal.find('#d_size').text("规格：" + medicine.size)
                    modal.find('#d_store').text("保存方式：" + medicine.store)
                    modal.find('#d_validityTime').text("有效期：" + medicine.validityTime)
                }
            )
        })
    </script>

    <script src="/static/common/assets/vendor/paginator/bootstrap-paginator.min.js"></script>
    <script>
        $("#search").click(function () {
            var id = $("#searchId").val();
            if ($.trim(id) == "") {
                $("#test").load("/test/medicineInfo?page=1");//重新加载整个<body>,定位到第一页
            }
            else {
                $.get(
                    "/contents/medicine/selectById",
                    {id: id},
                    function (data) {
                        $("#tbody").html("");
                        $("#paginationBar").html("");
                        var medicine = data.value;

                        var str =
                            "<tr>" +
                            "<td style=\"width: 10%\" >" + medicine.id + "</td>\n" +
                            "<td style=\"width: 20%\" >" + medicine.name + "</td>\n" +
                            "<td style=\"width: 25%\" >" + medicine.permitId + "</td>\n" +
                            "<td style=\"width: 10%\" >" + medicine.medicineType + "</td>\n" +
                            "<td style=\"width: 10%\" >" + medicine.insuranceType + "</td>\n" +
                            "<td style=\"width: 10%\" >\n" +
                            "    <nobr>\n" +
                            "        <button th:id=detail" + medicine.id + " class=\"btn btn-success btn-sm\" style=\"padding: 6px\" data-id=" + medicine.id + " data-target=\"#detailModal\" data-toggle=\"modal\">详情</button>\n" +
                            "        <button th:id=edit" + medicine.id + " class=\"btn btn-primary btn-sm\" style=\"padding: 6px\" data-id=" + medicine.id + " data-target=\"#editModal\" data-toggle=\"modal\">编辑</button>\n" +
                            "        <button id=del" + medicine.id + " class=\"btn btn-danger btn-sm\" style=\"padding: 6px\"   data-id=" + medicine.id + " data-target=\"#delModal\" data-toggle=\"modal\">删除</button>\n" +
                            "    </nobr>\n" +
                            "</td>"
                        "</tr>";

                        $("#tbody").append(str);

                    }
                )
            }
        })
    </script>

    <script th:inline="javascript" type='text/javascript'>
        var max = [[${maxPage}]];
        var cur = [[${currentPage}]];
        $('#pageLimit').bootstrapPaginator({
            currentPage: cur,
            totalPages: max,
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 5,
            // pageUrl:function(type, page, current){
            //     return "/test/hospitalInfo?page="+page
            // },
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },//改写分页按钮字样
            onPageClicked: function (event, originalEvent, type, page) {
                //根据点击的页面，刷新整个body
                $("#test").load("/test/medicineInfo?page=" + page);
            }
        });
    </script>
</div>

</html>